<h2 id="test"><?php echo $this->h2; ?></h2>
<br />
<?php
$date = isset($_GET['date']) ? $_GET['date'] : '';
$html = '<tr class="replace-inputs">';
foreach ($columns as $column) {
    $html .= '<td>' . $column . '</td>';
}
$html .= '</tr>';

$tbody = '';
foreach ($data as $tds) {
    $tbody .= '<tr>';
    foreach ($tds as $td) {
        $style = '';
        if (filter_var($td, FILTER_VALIDATE_INT) || $td === 0) {
//            if ($td != 0)
//                $td = number_format($td, 0, '.', ' ');
            $style = 'style="text-align: right;"';
        }
        $tbody .= '<td ' . $style . '>' . $td . '</td>';
    }
    $tbody .= '</tr>';
}
//echo CHtml::encode($tbody);exit;
?>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary" data-collapsed="0">
            <div class="panel-body">
                <form role="form" class="form-horizontal form-groups-bordered" method="get">                    
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Selected Date Range</label>
                        <div class="col-sm-5">
                            <input type="text" name="date" value="<?php echo $date; ?>" class="form-control daterange" data-callback="callback_test" data-format="YYYY-MM-DD" data-start-date="<?php echo date('Y-m-d', strtotime("-1 month")); ?>" data-end-date="<?php echo date('Y-m-d'); ?>" data-separator="," />
                        </div>                        
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php
$this->widget('ext.chart.lineChart', array(
    'title' => '',
    'subtitle' => '',
    'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    'yTitle' => '',
    'valueSuffix' => '',
    'series' => array(
        array('name' => 'Tokyo', 'data' => array(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6)),
        array('name' => 'sdf', 'data' => array(33, 3, 4, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6)),
        array('name' => 'sdf', 'data' => array(77, 89, 44, 14.5, 18.2, 21.5, 25.2, 55, 3, 18.3, 7, 11)),
    )
));
?>

<?php
$this->widget('ext.chart.pieChart', array(
    'title' => '',
    'subtitle' => '',
    'series' => array(
        array('name' => 'Tokyo', 'data' => 3),
        array('name' => 'sdf', 'data' => 5),
        array('name' => 'sdf', 'data' => 6),
    )
));
?>

<table class="table table-bordered datatable" id="table-<?php echo $this->id; ?>">
    <thead>
        <?php echo $html; ?>
        <?php echo $html; ?>
    </thead>
    <tbody>
        <?php echo $tbody; ?>
    </tbody>    
    <tfoot>
        <?php echo $html; ?>
    </tfoot>
</table>
<script type="text/javascript">
    function showAjaxModal() {
        jQuery('#modal-7').modal('show', {backdrop: 'static'});
    }
</script><!-- Footer -->
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var table = $("#table-<?php echo $this->id; ?>").dataTable({
            //"ajax": "<?php echo Yii::app()->createUrl('/site/dPStatuses'); ?>",
//            "sDom": "<'row'<'col-xs-6 col-left'l><'col-xs-6 col-right'<'export-data'T>f>r>t<'row'<'col-xs-6 col-left'i><'col-xs-6 col-right'p>>",
            "iDisplayLength": 1000,
            "sPaginationType": "bootstrap",
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "bStateSave": true,
            "fnInitComplete": function (oSettings, json) {
                // $('#table-3_wrapper div.row .col-xs-6:first ').append($('#calendars'));
            }
        });

//        function updateTable() {
//            table.api().ajax.reload();
//            setTimeout(updateTable, 5000);
//        }
//        updateTable();

        table.columnFilter({
            "sPlaceHolder": "head:after"
        });


    });

</script>
